<template>
  <div class="box">
    <h2> 测试 vueUse 的鼠标坐标 </h2>
    <h3>Mouse: {{ x }} x {{ y }}</h3>
    <hr>
    <div v-if="isSupported">
      <note>
        Clipboard Permission: read <b>{{ permissionRead }}</b> | write
        <b>{{ permissionWrite }}</b>
      </note>
      <p>
        Current copied: <code>{{ text || 'none' }}</code>
      </p>
      <input v-model="input" type="text">
      <button @click="copy(input)">
        Copy
      </button>
    </div>
    <p v-else>
      Your browser does not support Clipboard API
    </p>
  </div>
</template>
  
<script lang="ts" setup>
// 使用剪贴板
import { ref } from 'vue'
import { useClipboard, usePermission } from '@vueuse/core'
import { useMouse, useLocalStorage, usePreferredDark, useToggle } from '@vueuse/core'

const input = ref('')
const { text, isSupported, copy } = useClipboard()
const permissionRead = usePermission('clipboard-read')
const permissionWrite = usePermission('clipboard-write')

// 监听当前鼠标坐标的一个方法，他会实时的获取鼠标的当前的位置
const { x, y } = useMouse()
//持久化数据的方法，他会把数据持久化到本地存储中
const store = useLocalStorage(
  'my-storage',
  {
    name: 'Apple',
    color: 'red',
  },
)

</script>

<style lang="less" scoped>
.box{
  border:1px solid skyblue
}
</style>
  